<template>
    <baidu-map :center="center" :zoom="zoom" @ready="handler" class="map" :scroll-wheel-zoom="true">
    <!--缩放-->
    <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
    <!--地图类型-->
    <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type>
    <!--定位-->
    <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
    <!--驾车路线-->
    <bm-view class="map1"></bm-view>
    <bm-driving
        start="宋家庄地铁站"
        end="北京西站"
        :auto-viewport="true"
        policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE"
        :panel="false"
        location="北京天通苑北"
        :waypoints="['西二旗']">
    </bm-driving> 
  </baidu-map>
</template>
<script>
import {BmlMarkerClusterer} from 'vue-baidu-map'
export default {
  name:"Runmap",
  data () {
    return {
      center: {lng: 0, lat: 0},
      zoom:15
    }
  },
  components: {
    BmlMarkerClusterer
  },
  methods: {
    handler ({BMap, map}) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 30
    }
  }
}
</script>
<style scoped>
 .map{
   width: 100%;
   height: 500px;
 }
  .map1{
   width: 100%;
   height: 500px;
 } 
</style>